<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" lang="zh">
<div th:fragment="indexMenus">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        /* 选项卡 */
        .layui-tab {
            margin: 0;
            height: 100%;
        }

        .layui-body {
            bottom: 10px !important;
        }

        .layui-tab-title {
            /*width: calc(100% - 100px)*/
            right: 70px;
        }

        .layui-tab-content {
            position: absolute;
            padding: 0px;
            top: 40px;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .layui-tab-item {
            height: 100%;
            width: 100%;
        }

        .custom-iframe {
            width: 100%;
            height: 100%;
        }

        .layui-tab-title li:first-child > i {
            display: none;
        }

        .layui-logo {
            width: auto !important;
            left: 20px !important;
        }
    </style>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="menu" id="menuTree">

            </ul>
        </div>
    </div>
    <div class="layui-body" style="overflow: hidden;">
        <div class="layui-tab layui-tab-card" lay-allowClose="true" lay-filter="mainTabs">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>
    <script type="text/html" id="menus_tpl">
        {{#  layui.each(d, function(index, item){ }}
        <li class="layui-nav-item  {{# if(index==0) { }} layui-this {{# } }} ">
            <a href="javascript:" data-options={{# if(!item.childs) { }}{{ JSON.stringify(item) }}{{# } }}>
                {{# if(item.icon && item.icon!=''){ }}
                <i class="layui-icon {{ item.icon }}"></i>
                {{# } }}
                {{item.title }}
            </a>
            {{# if(item.childs) { }}
            <dl class="layui-nav-child">
                {{# layui.each(item.childs, function(indexC, itemC){ }}
                <dd id="dd_{{itemC.id}}"><a href="javascript:" data-options={{ JSON.stringify(itemC) }}>{{ itemC.title }}</a></dd>
                {{# }); }}
            </dl>
            {{# } }}
        </li>
        {{#  }); }}
    </script>
    <script type="text/javascript">
        asyncFn.push(function () {
            var inNode = [[${node!=null?true:false}]];
            layui.use('laytpl', function () {
                var laytpl = layui.laytpl;
                var innerHTML = document.getElementById("menus_tpl").innerHTML;
                loadingAjax({
                    url: inNode ? '../menus_data.json' : './menus_data.json',
                    data: {},
                    success: function (data) {
                        if (200 !== data.code) {
                            layer.msg(data.msg);
                            return
                        }
                        laytpl(innerHTML).render(data.data, function (html) {
                            $("#menuTree").html(html);
                            element.render('nav');
                            var first = data.data[0];
                            if (first.childs) {
                                first = first.childs[0]
                            }
                            tabChange(first);
                            // 左侧导航条事件
                            element.on('nav(menu)', function (data) {
                                var dataJSON = $(data.context).attr("data-options");
                                if (!dataJSON) {
                                    return;
                                }
                                var options;
                                try {
                                    options = JSON.parse(dataJSON);
                                } catch (e) {
                                    console.log(dataJSON);
                                    options = eval('(' + dataJSON + ')');
                                }
                                tabChange(options);
                            });
                        });
                    }
                });
            });
        });
    </script>
</div>
</html>
